<template>
	<view>
		<view class="lvbox">
			<view class="xiaobai sanshier nofonweight">{{dataAll.name}}</view>
			<view class="xiaobai strongtext nofonweight margin_top">学生数量：{{dataAll.user_num}}</view>
			<view class="flexleft margin_top">
				<u-icon name="map" color="#FFFFFF" size="20"></u-icon>
				<view class="xiaobai ershiba nofonweight">{{dataAll.cityinfo}}{{dataAll.address}}</view>
			</view>
		</view>
		<view class="jianju"></view>
		<view class="ffffff">
			<u-tabs :list="list2" lineColor="#1BA95B" :scrollable="false" @click="changetab" :activeStyle="{
				    color: '#333333',
				    fontWeight: 'bold',
				    transform: 'scale(1.05)'
				}" :inactiveStyle="{
				            color: '#333333',
							fontWeight: '400',
				            transform: 'scale(1)'
				        }"></u-tabs>
			<!-- 学生信息 -->
			<view class="" v-show="currenttabtow == 0">
				<view class="flexleft flex_wrap">
					<view class="flexcenter sanshiss margin_top" v-for="item in xsAll" :key="item.id" @click="tzjbxx(item.id)">
						<view class="huibox">
							<view class="touxiang">
								<image :src="item.avatar_text" mode=""></image>
							</view>
							<view class="margin_top1 titletext xiaohei nofonweight textcenter">{{item.nickname}}</view>
							<view class="margin_top2 smalltext xiaohui nofonweight textcenter">已上课时：{{item.ys_num}}</view>
							<view class="margin_top1 smalltext xiaohui nofonweight textcenter">剩余课时：{{item.sy_num}}</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 课表信息 -->
			<view class="" v-show="currenttabtow == 1">
				<view class="mainpadding ffffff">
					<!-- 日期 -->
					<view class="flexbetween">
						<view class="ershiba  xiaohei nofonweight" style="color: #1ba95b;" @click="changeMonth('pre')">上一月</view>
						<view class="sanshier xiaohei fonweight">{{y+'年'+formatNum(m)+'月'}}</view>
						<view class="ershiba  xiaohei nofonweight" style="color: #1ba95b;" @click="changeMonth('next')">下一月</view>
					</view>
					<scroll-view class="scroll-view_H margin_top" scroll-x="true">
						<view class="scroll-view-item_H uni-bg-red " v-for="(item,index) in dateData" :key="index"
							@click="changeday(item)">
							<!-- 已选中 -->
							<view class=" margin_right4" :class="currentdate==item.date?'zitixhx':'weixzx'">
								<view class="ershiba xiaohei nofonweight">
									{{returnmouth(item.week)}}({{item.mouth}}-{{item.day}})</view>
							</view>
						</view>
					</scroll-view>
					<view class="flexleft flex_wrap" v-if="flag" >
						<view class="lvbox1" @click="tzcyry(item.id)"
							v-for="(item,index) in kckcb" :key="item.id">{{item.start_time}}-{{item.end_time}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				currenttabtow: 0,
				list2: [{
						name: '学生信息',
						value: 1,
					},
					{
						name: '课表信息',
						value: 2
					}
				],
				listid:"",
				xsAll:[],
				dataAll:{},
				currentdate: "", //年月日
				y: new Date().getFullYear(), // 年
				m: new Date().getMonth() + 1, // 月
				kckcb: [],
				dateData: [],
				flag: true,
			}
		},
		onLoad(options) {
			this.listid = options.id
		},
		onShow() {
			this.getxs()
			this.getDetail()
			this.getkb()
		},
		methods: {
			// 跳转人员基本信息
			tzjbxx(id) {
				uni.navigateTo({
					url: '/pages_xiaoshou/renyuanxx?id='+id
				})
			},
			getDetail(){
				httpRequest.request("/api/kccl/kcDetail", 'GET', {
					id:this.listid
				}).then(res => {
					this.dataAll = res.data
				})
			},
			getxs(){
				httpRequest.request("/api/user/xsKcUser", 'GET', {
					id:this.listid
				}).then(res => {
					this.xsAll = res.data
				})
			},
			// 跳转参与人员
			tzcyry(id){
				let data = {
					kc_id:this.listid,
					kc_kcb_id:id,
					date:this.currentdate
				}
				uni.navigateTo({
					url:'/pages_xiaoshou/canyurenyuan?msg='+encodeURIComponent(JSON.stringify(data))
				})
			},
			changetab(e) {
				this.currenttabtow = e.index;
			},
			changeMonth(type) {
				if (type == 'pre') {
					if(this.y==new Date().getFullYear() && this.m==new Date().getMonth() + 1){
						return false
					}
					if (this.m + 1 == 2) {
						this.m = 12;
						this.y = this.y - 1;
					} else {
						this.m = this.m - 1;
					}
				} else {
					if (this.m + 1 == 13) {
						this.m = 1;
						this.y = this.y + 1;
					} else {
						this.m = this.m + 1;
					}
				}
				this.getkb(true)
			},
			formatNum(num) {
				let res = Number(num);
				return res < 10 ? '0' + res : res;
			},
			returnmouth(val) {
				if (val == 1) return "周一"
				if (val == 2) return "周二"
				if (val == 3) return "周三"
				if (val == 4) return "周四"
				if (val == 5) return "周五"
				if (val == 6) return "周六"
				if (val == 0) return "周日"
			},
			changeday(item) { //选择日期
				this.kckcb = item.kcKcbbData
				this.currentdate = item.date
			},
			getkb(flag) {
				let _this = this;
				let data = {
					kc_id: this.listid,
					date:this.y+"-"+this.m
				}
				let url = '/api/user/xsKcKcb'
				httpRequest.request(url, 'GET', data, false, false, true).then(res => {
					this.dateData = res.data
					if (flag) {
						this.currentdate = res.data[0].date
						this.kckcb = res.data[0].kcKcbbData
						return false
					}
					if (!flag && !this.currentdate) {
						this.currentdate = res.data[0].date
						this.kckcb = res.data[0].kcKcbbData
						return false
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.sanshiss{
		width: 33.33%;
	}
	.toumd {
		opacity: 0.5;
	}
	
	.xiahuaxian1 {
		border-bottom: 1rpx solid #F5F5F5;
	}
	
	.nerbox {
		padding: 38rpx 31rpx;
	}
	
	.wexbxo {
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}
	
	.youbk {
		border-right: 2rpx solid #F5F5F5;
	}
	
	.yxzbox {
		background: #1BA95B;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}
	.lvbox1 {
		padding: 10rpx 20rpx;
		border-radius: 50rpx;
		color: #FFFFFF;
		font-size: 26rpx;
		margin: 30rpx 30rpx 0 0;
		background-color: #1ba95d;
	}
	
	.xiaolvbox {
		padding: 10rpx 20rpx;
		border-radius: 50rpx;
		color: #999;
		margin: 30rpx 30rpx 0 0;
		background-color: #effff6;
		font-size: 26rpx;
	}
	
	.huibox {
		padding: 10rpx 20rpx;
		border-radius: 50rpx;
		color: #999;
		// margin: 30rpx 30rpx 0 0;
		background-color: #f7f7f7;
		font-size: 26rpx;
	}
	
	.shijbox {
		padding: 12rpx 30rpx;
		background: #1BA95B;
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
	}
	
	.chanbox {
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 2rpx solid #1BA95B;
		// width: 260rpx;
	}
	
	.yixlbtn {
		padding: 10rpx 20rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		background: #1BA95B;
		width: 40rpx;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
	}
	
	.wexzlbtn {
		padding: 10rpx 20rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #1BA95B;
		width: 40rpx;
		background: #EFFFF6;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
	}
	
	.huibtn {
		padding: 10rpx 20rpx;
		background: #F5F5F5;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		width: 40rpx;
		color: #777777;
	}
	
	.weixzx {
		padding-bottom: 10rpx;
		// border-bottom: 6rpx solid #F5F5F5;
		// background: #1BA95B;
		border-radius: 6rpx 6rpx 6rpx 6rpx;
	}
	
	.zitixhx {
		padding-bottom: 10rpx;
		border-bottom: 6rpx solid #1BA95B;
		// background: #1BA95B;
		border-radius: 6rpx 6rpx 6rpx 6rpx;
	}
	.touxiang {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;

		image {
			border-radius: 50%;
			width: 100%;
			height: 100%;
		}
	}

	.lvbox {
		background: #1BA95B;
		padding: 40rpx 30rpx 30rpx;
	}

	.huibox {
		padding: 30rpx 45rpx 30rpx;
		background: #F5F5F5;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
	}
</style>